<template>
    <div v-if="items.length" class="full-page-slide-wrapper">
        <slide ref="slide" :autoPlay="false" :loop="false" :allowEmit="true">
          <Lightup></Lightup>
          <Raffle></Raffle>
            <!--<div v-for="(item, index) in items" :key="index">-->
                <!--<div class="full-page-img-wrapper" :style="getStyle(index)">-->
                    <!--<div v-if="index === items.length -1" class="button-wrapper" @click="handleClick()">-->
                        <!--<span class="button">3333333333</span>-->
                    <!--</div>-->
                    <!--<slide class="sub-slide" v-if="index===0"-->
                           <!--:loop="true">-->
                        <!--<div v-for="(slideItem,slideindex) in slideData" :key="slideindex">-->
                            <!--<a :href="slideItem.linkUrl">-->
                                <!--<img :src="slideItem.picUrl">-->
                            <!--</a>-->
                        <!--</div>-->
                    <!--</slide>-->
                <!--</div>-->
            <!--</div>-->
        </slide>
    </div>
</template>

<script type="text/ecmascript-6">
    import Slide from '../../../components/slide/slide.vue'
    import Bonus from './bonus.vue'
    import Raffle from './raffle.vue'
    import Lightup from '../canvas/lightup';
    const COMPONENT_NAME = 'full-page-slide';
    export default {
        name: COMPONENT_NAME,
        // props: {
        //     data: {
        //         type: Array,
        //         default: []
        //     }
        // },
        data () {
            return {
              items: ['', '', '']
            }
        },
        components: {
            Slide,
            Bonus,
            Raffle,
            Lightup
        },
        mounted () {
          this.$root.eventBus.$on('changePage', (index) => {
            this.$refs.slide.goToPage(index)
          });
          this.$root.eventBus.$emit('rules', window.toastConfig);
          // console.log('window.giftsConfig.list', window.giftsConfig.list)
          // this.giftsArray = window.giftsConfig.list;
          // this.$root.eventBus.$emit('gifts', window.giftsConfig);
        },
        methods: {
            handleClick () {
                this.$emit('finish')
            },
            getStyle (index) {
                return `background-image:url(${this.items[index]})`
            },
            scrollEnd (pageIndex) {
              console.log('1111111111', pageIndex)
            }
        }
    }
</script>

<style lang="stylus">
    @import "../../../assets/css/variable.styl"
    .full-page-slide-wrapper
      /*position: fixed*/
      /*z-index: 20*/
      /*top: 0*/
      /*left: 0*/
      width: 100%
      height: 100%
      overflow: hidden
      .slide
        height: 100%
        .slide-group
            height: 100%
            .slide-item
                height: 100%
                .full-page-img-wrapper
                    position: relative
                    height: 100%
                    background-size: cover
                    transform: translateZ(0)
                    .button-wrapper
                        position: fixed
                        bottom: 85px
                        display: block
                        width: 100%
                        overflow: hidden
                        .button
                            display: inline-block
                            width: 130px
                            padding: 15px 0
                            border: 4px solid rgba(255, 255, 255, 0.7)
                            border-radius: 4px
                            color: rgba(255, 255, 255, 0.7)
                            font-size: $fontsize-large-xx

        .sub-slide
            height: 300px
            min-height: 1px
            position: relative
            .slide-group
                position: relative
                overflow: hidden
                white-space: nowrap
                .slide-item
                    float: left
                    box-sizing: border-box
                    overflow: hidden
                    text-align: center
                    a
                        display: block
                        width: 100%
                        overflow: hidden
                        text-decoration: none
                    img
                        display: block
                        width: 100%
</style>
